<template>
	<view class="u-flex-col">
		<view class="fixed">
			<view class="header-height u-flex-col">
				<image :src="bgImage" mode="widthFix" class="image" v-if="bgImage"></image>
				<slot name="header "></slot>

			</view>
		</view>
		<u-navbar :title="title" :background="bgColor" style="color: #ffffff;background-color: rgba(255, 70, 48, 1);"
			:bg-image="bgImage" titleColor="#ffffff" back-icon-color="#ffffff" :custom="true">

		</u-navbar>

		<slot></slot>
	</view>
</template>

<script>
	export default {
		props: {
			title: {
				type: String,
				default: ''
			}
		},
		data() {
			return {
				workerTypeName: "工长",
				bgImage: '',
				bgColor: {
					'background-color': 'transparent'
				}
			}
		},
		methods: {

		}
	}
</script>

<style lang="scss" scoped>
	.fixed {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;

	}

	.head-height {
		.image {
			width: 750rpx;
		}
	}

	.head-height {
		overflow: hidden;
	}

	.content-wrap {
		border-radius: 14rpx 14rpx 0 0;
		overflow: hidden;
		position: relative;
		top: -14rpx;
		margin-bottom: -14rpx;
	}

	.content {
		background-color: #ffffff;
		z-index: 4;

	}

	::v-deep .header {
		width: 750rpx;
		height: 442rpx;
		background: linear-gradient(152deg, #76A5FD 0%, #2C76FF 100%);
	}
</style>